.container {
  display: flex;
  gap: 16px;

  .newProjectButton {
    color: var(--color-8); /* Assuming this is white */
    background-color: var(
      --sciphi-2
    ); /* Replace with the actual variable or hex value for bg-indigo-400 */
    border: 1px solid var(--color-8);
    border-radius: 0.3rem;
    height: 2.6rem;
    width: 10rem;
    padding: 0.3rem 0.6rem 0 0.6rem;
    font-size: 0.95rem;
    // font-weight: 600;
    outline: none;
    cursor: pointer;
    transition: all 0.2s;
    text-align: center;

    &:hover {
      background-color: var(--sciphi-3);
      color: var(--color-8);
    }
  }

  .createTeamButton {
    background-color: transparent;
    border: 1px solid var(--color-2);
    outline: none;
    height: 2.6rem;
    border-radius: 0.3rem;
    padding: 0 0.9rem;
    display: flex;
    align-items: center;
    cursor: pointer;
    transition: border-color 0.2s;

    .createTeamIcon {
      color: var(--color-5);
      transition: color 0.2s;
    }

    &:hover {
      border-color: var(--color-7);

      .createTeamIcon {
        color: var(--color-7);
      }
    }
  }
}
